<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }

        /* div[class] {
            font-size: 18px;
        } */
        /* li[class] {
            background: red;
        } */

        /* li[class="first"] {
            background: red;
        } */
        /* li:not([class="first"]) {
            background: red;
        } */
        /* li[class^="f"] {
            background: red;
        } */
        /* li[class$="t"] {
            background: red;
        } */

        /* li[class*="a"] {
            background: red;
        } */
        /* .list li:nth-child(even) {
            background-color: #6ff;
        } */
    </style>
</head>

<body>
    <button>get</button>
    <form action="" method="get">
        <p>
            <label for="">用户名:</label>
            <input type="text" name="user" placeholder="请输入用户名..." value="">
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="password" name="pwd" disabled placeholder="请输入密码..." value="">
        </p>
        <p>
            <!-- multiple -->
            <select name="year">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009" selected>2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
            </select>
        </p>
        <p>
            <input type="radio" name="orderCol" checked value="id">
            <input type="radio" name="orderCol" value="chinese">
            <input type="radio" name="orderCol" value="math">
            <input type="radio" name="orderCol" value="english">
            <input type="radio" name="orderCol" value="total">
        </p>
    </form>
</body>
<script>
    // :enabled 匹配表单元素中 为可用状态的元素
    // :disabled 匹配表单元素中 为禁用状态的元素

    // :checked  匹配表单元素中 为选中状态的元素(单选框和选课)
    // :selected 匹配表单元素(下拉框)中 为选中状态的option


    $("button").eq(0).click(function () {
        // console.log($("input:enabled"));
        // console.log($("input:disabled"));

        // console.log($("input:radio:checked"));
        // console.log($("input:radio:checked").val());

        console.log($("select option:selected"));
        console.log($("select option:selected").get(0));
        console.log($("select option:selected").val());   //option的值
    })

</script>

</html>